<template>
	<cl-page>
		<cl-topbar title="满减活动详情" />

		<view class="page">
			<!-- 加载状态 -->
			<cl-loading-mask :loading="loading" text="加载中..." />

			<!-- 错误状态 -->
			<view v-if="error" class="error-state">
				<cl-empty icon="error" :text="error" />
				<cl-button round type="primary" @tap="loadData">重新加载</cl-button>
			</view>

			<!-- 活动详情 -->
			<view v-else-if="promotion" class="promotion-detail">
				<!-- 活动头部 -->
				<view class="promotion-header bg-gradient-to-r from-red-500 to-orange-500 text-white p-6 rounded-lg mb-4">
					<view class="promotion-title text-xl font-bold mb-2">
						{{ promotion.promName }}
					</view>
					<view class="promotion-desc text-sm opacity-90 mb-3">
						{{ promotion.billCode }}
					</view>
					<view class="promotion-status">
						<cl-tag :type="getStatusType(promotion.status)" size="small">
							{{ getStatusText(promotion.status) }}
						</cl-tag>
					</view>
				</view>

				<!-- 活动时间 -->
				<view class="time-info bg-white rounded-lg p-4 mb-4 shadow-sm">
					<view class="flex items-center mb-2">
						<cl-icon name="el-icon-time" color="#666" :size="32" />
						<text class="ml-2 font-medium">活动时间</text>
					</view>
					<view class="time-range text-sm text-gray-600">
						{{ formatDate(promotion.startTime) }} 至 {{ formatDate(promotion.endTime) }}
					</view>
					<view v-if="isPromotionActive(promotion)" class="remaining-time text-sm text-green-600 mt-1">
						剩余时间：{{ calculateRemainingTime(promotion.endTime) }}
					</view>
				</view>

				<!-- 满减详情 -->
				<view class="reduction-details bg-white rounded-lg p-4 mb-4 shadow-sm">
					<view class="section-title font-medium mb-3">满减优惠详情</view>
					<view class="details-list space-y-2">
						<view
							v-for="detail in promotion.details"
							:key="detail.id"
							class="detail-item flex justify-between items-center p-3 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg border border-green-200"
						>
							<view class="threshold">
								<text class="text-lg font-bold text-green-600">满 ¥{{ detail.taxAmount }}</text>
							</view>
							<view class="discount">
								<text class="text-lg font-bold text-red-600">{{ detail.dedRate }}折</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 使用说明 -->
				<view class="usage-guide bg-white rounded-lg p-4 mb-4 shadow-sm">
					<view class="section-title font-medium mb-3">使用说明</view>
					<view class="guide-steps space-y-3">
						<view class="step-item flex items-start">
							<view class="step-number bg-blue-500 text-white w-6 h-6 rounded-full text-center text-xs leading-6 mr-3 mt-0.5">
								1
							</view>
							<view class="step-content text-sm text-gray-600">
								选择参与满减活动的商品加入购物车
							</view>
						</view>
						<view class="step-item flex items-start">
							<view class="step-number bg-blue-500 text-white w-6 h-6 rounded-full text-center text-xs leading-6 mr-3 mt-0.5">
								2
							</view>
							<view class="step-content text-sm text-gray-600">
								购物车金额达到满减门槛即可享受优惠
							</view>
						</view>
						<view class="step-item flex items-start">
							<view class="step-number bg-blue-500 text-white w-6 h-6 rounded-full text-center text-xs leading-6 mr-3 mt-0.5">
								3
							</view>
							<view class="step-content text-sm text-gray-600">
								结算时系统自动计算并应用最优惠的折扣
							</view>
						</view>
					</view>
				</view>

				<!-- 操作按钮 -->
				<view class="action-buttons">
					<cl-row :gutter="20">
						<cl-col :span="12">
							<cl-button round @tap="goToProducts">
								立即购买
							</cl-button>
						</cl-col>
						<cl-col :span="12">
							<cl-button round type="primary" @tap="goToCart">
								查看购物车
							</cl-button>
						</cl-col>
					</cl-row>
				</view>
			</view>

			<view v-else class="empty-state">
				<cl-empty icon="goods" text="活动不存在或已下架" />
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useCool } from "/@/cool";
import { useUi } from "/$/cool-ui";
import dayjs from "dayjs";

interface FullReductionDetail {
	id: number;
	billSn: number;
	taxAmount: number;
	billNo: string;
	dedRate: number;
	status: number;
	description: string;
}

interface FullReductionPromotion {
	billNo: string;
	promName: string;
	promType: string;
	status: number;
	startTime: string;
	endTime: string;
	billCode: string;
	details: FullReductionDetail[];
}

const { router, service } = useCool();
const ui = useUi();

const loading = ref(true);
const error = ref("");
const promotion = ref<FullReductionPromotion>();
const billNo = ref("");

// 页面挂载
onMounted(() => {
	// 从路由参数获取billNo
	const query = router.query;
	if (query?.billNo) {
		billNo.value = query.billNo as string;
		loadData();
	} else {
		error.value = "缺少活动参数";
		loading.value = false;
	}
});

// 加载数据
async function loadData() {
	try {
		loading.value = true;
		error.value = "";

		const response = await service.goods.promo.getComboDetailsByType({
			promType: "MJ"
		});

		if (response?.list) {
			const targetPromotion = response.list.find((p: any) => p.billNo === billNo.value);
			if (targetPromotion) {
				promotion.value = targetPromotion;
			} else {
				error.value = "活动不存在";
			}
		} else {
			error.value = "获取活动详情失败";
		}
	} catch (err: any) {
		error.value = err.message || "网络错误，请稍后重试";
	} finally {
		loading.value = false;
	}
}

// 判断活动是否进行中
function isPromotionActive(promotion: FullReductionPromotion): boolean {
	const now = new Date();
	const startTime = new Date(promotion.startTime);
	const endTime = new Date(promotion.endTime);

	return promotion.status === 1 && now >= startTime && now <= endTime;
}

// 获取状态文本
function getStatusText(status: number): string {
	switch (status) {
		case 1:
			return "进行中";
		case 0:
			return "已停用";
		default:
			return "未知";
	}
}

// 获取状态类型
function getStatusType(status: number): string {
	switch (status) {
		case 1:
			return "success";
		case 0:
			return "danger";
		default:
			return "info";
	}
}

// 格式化日期
function formatDate(dateString: string): string {
	return dayjs(dateString).format("YYYY-MM-DD HH:mm");
}

// 计算剩余时间
function calculateRemainingTime(endTime: string): string {
	const end = dayjs(endTime).valueOf();
	const now = Date.now();
	const diff = end - now;

	if (diff <= 0) return "已结束";

	const days = Math.floor(diff / (1000 * 60 * 60 * 24));
	const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
	const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

	if (days > 0) return `${days}天${hours}小时`;
	if (hours > 0) return `${hours}小时${minutes}分钟`;
	return `${minutes}分钟`;
}

// 去购买
function goToProducts() {
	router.push("/pages/goods/list");
}

// 查看购物车
function goToCart() {
	router.push("/pages/index/shopping-cart");
}
</script>

<style lang="scss" scoped>
.page {
	padding: 24rpx;
}

.promotion-detail {
	.section-title {
		font-size: 32rpx;
		color: #333;
	}

	.details-list {
		.detail-item {
			&:not(:last-child) {
				margin-bottom: 16rpx;
			}
		}
	}

	.guide-steps {
		.step-item {
			.step-number {
				flex-shrink: 0;
				font-size: 24rpx;
			}

			.step-content {
				flex: 1;
				line-height: 1.5;
			}
		}
	}
}

.error-state,
.empty-state {
	padding: 100rpx 0;
	text-align: center;
}

.action-buttons {
	margin-top: 60rpx;
	padding-bottom: 40rpx;
}
</style> 